/**
 * 标签media框
 * @param {object} activityInfo 标签
 */

import React from 'react';
import PropTypes from 'prop-types';
import TextAvatar from '@txdfe/at-text-avatar';
import utils from 'utils';
import { YunxiaoList } from '@alife/devops-ui';
import { ENUM } from 'utils/constants.js';
import { Link, navigate } from 'utils/router';
import CommitsDescription from './commitsDescription';
import './index.scss';
import intl from '../../locale';

const { pathResource } = window.FORCE;

// merge_type
const mergeTypeText = {
  squash: ' Squash ',
  rebase: ' Rebase ',
  'no-fast-forward': ' Merge ',
  'ff-only': ' Merge(fast-forward-only) ',
  default: intl.get({ id: 'code-assets.components.activityList.Local', defaultMessage: '本地' }),
};

export default class ActivityList extends React.PureComponent {
  static propTypes = {
    actData: PropTypes.object,
  };

  onCommitChange = (e, value) => {
    e.preventDefault();
    const { actData } = this.props;
    const branchName = this.getBranchName(actData);
    navigate(`/${pathResource.fullPath}/commit/${value}?branch=${branchName}`);
  };

  getBranchName = (dataMap) => {
    const branch_name = dataMap && dataMap[':ref'] && dataMap[':ref'].replace(/refs\/heads\//, '');
    const branchName = branch_name.replace(/^refs\/tags\//, '');
    return branchName;
  };

  // 拼装活动语句
  activityActionJsx(activity) {
    const { dataMap } = activity;
    const user_name = activity.user.username;
    const { name } = activity.user;
    const displayName = utils.getUserDisplayName(user_name, name, '');
    const user_avatar = activity.user.avatar_url;
    const user_email = activity.user.email;
    const branch_name = dataMap && dataMap[':ref'] && dataMap[':ref'].replace(/refs\/heads\//, '');
    // object_kind为push or tag_push
    const object_kind = dataMap && dataMap[':object_kind'];
    const before = dataMap && dataMap[':before'];
    const after = dataMap && dataMap[':after'];
    const commits = dataMap && dataMap[':commits'];
    const projectId = dataMap && dataMap[':project_id'];
    const repoUrl = dataMap && dataMap[':repository'] && dataMap[':repository'][':homepage'];
    const commits_count = dataMap && dataMap[':total_commits_count'];
    const current_access = dataMap && dataMap[':current_access'];
    const previous_access = dataMap && dataMap[':previous_access'];
    const operator = dataMap && dataMap[':operator'] && dataMap[':operator'][':name'];
    // const operator_email = dataMap && dataMap[':operator'] && dataMap[':operator'][':email'];
    // const repository_public_homepage = `/${activity.project.name}`;
    let repository_homepage;
    let repository_public_name;
    let repository_path;
    if (activity.project) {
      repository_homepage = `/${activity.project.path_with_namespace}`;
      repository_public_name = activity.project.name;
      repository_path = activity.project.name_with_namespace.split(' / ').slice(1).join(' / ');
    }

    let group_homepage;
    let group_path;
    if (activity.group) {
      group_path = activity.group.name_with_namespace.split(' / ').slice(1).join(' / ');
      group_homepage = `/${activity.group.path_with_namespace}`;
    }

    const isProjectPage = pathResource && pathResource.type === 'project';
    const isGroupPage = pathResource && pathResource.type === 'GROUP';
    const isGroupActivity = activity.targetType && activity.targetType === 'Group';
    const mirrorSyncUrl = dataMap && dataMap[':mirror_sync_url'];

    const { note, mergeRequest } = activity;

    /* eslint-disable complexity */
    const actionJsxGeneratorHash = {
      PUSHED: () => {
        // const pathName = object_kind === 'push' ? 'commits' : 'tags';
        const branchName = branch_name.replace(/^refs\/tags\//, '');
        if (before === Array(41).join('0') && after !== Array(41).join('0')) {
          // before如果是0,表达式为 -> "#{name} pushed new #{ref_type} #{ref} to #{project_link}
          // 此时两种情况,分别为创建新分支和创建新tag
          // 注意当pathResource为代码库时，at某某库不显示
          return {
            title: (
              <React.Fragment>
                {isGroupPage ? (
                  <div>
                    <span className="text-author-color">{displayName}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.From',
                      defaultMessage: '从',
                    })}{' '}
                    <span className="text-repo-color">{repository_path}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.Created',
                      defaultMessage: '创建了',
                    })}
                    {object_kind === 'push'
                      ? intl.get({
                          id: 'code-assets.components.activityList.Branch',
                          defaultMessage: '分支',
                        })
                      : intl.get({
                          id: 'code-assets.components.activityList.Label',
                          defaultMessage: '标签',
                        })}{' '}
                  </div>
                ) : (
                  <div>
                    <span className="text-author-color">{displayName}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.Created',
                      defaultMessage: '创建了',
                    })}
                    {object_kind === 'push'
                      ? intl.get({
                          id: 'code-assets.components.activityList.Branch',
                          defaultMessage: '分支',
                        })
                      : intl.get({
                          id: 'code-assets.components.activityList.Label',
                          defaultMessage: '标签',
                        })}{' '}
                  </div>
                )}
              </React.Fragment>
            ),

            description: (
              <div className="normal-desc">
                <Link
                  to={`${repository_homepage}/tree/${utils.revisionEncodeURI(branchName)}`}
                  className="text-gray-08"
                >
                  {branchName}
                </Link>
              </div>
            ),
          };
        } else if (before !== Array(41).join('0') && after === Array(41).join('0')) {
          // after如果是0 -> "#{user_name} removed #{ref_type} #{ref} from #{project_link}"
          return {
            title: (
              <React.Fragment>
                {isGroupPage ? (
                  <div>
                    <span className="text-author-color">{displayName}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.From',
                      defaultMessage: '从',
                    })}{' '}
                    <span className="text-repo-color">{repository_path}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.Deleted',
                      defaultMessage: '删除了',
                    })}
                    {object_kind === 'push'
                      ? intl.get({
                          id: 'code-assets.components.activityList.Branch',
                          defaultMessage: '分支',
                        })
                      : intl.get({
                          id: 'code-assets.components.activityList.Label',
                          defaultMessage: '标签',
                        })}{' '}
                    {before ? (
                      <span>
                        (
                        <Link to={`${repository_homepage}/commit/${before}`}>
                          {before.slice(0, 8)}
                        </Link>
                        ){' '}
                      </span>
                    ) : null}
                  </div>
                ) : (
                  <div>
                    <span className="text-author-color">{displayName}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.Deleted',
                      defaultMessage: '删除了',
                    })}
                    {object_kind === 'push'
                      ? intl.get({
                          id: 'code-assets.components.activityList.Branch',
                          defaultMessage: '分支',
                        })
                      : intl.get({
                          id: 'code-assets.components.activityList.Label',
                          defaultMessage: '标签',
                        })}{' '}
                    {before ? (
                      <span>
                        (
                        <Link to={`${repository_homepage}/commit/${before}`}>
                          {before.slice(0, 8)}
                        </Link>
                        ){' '}
                      </span>
                    ) : null}
                  </div>
                )}
              </React.Fragment>
            ),

            description: (
              <div className="normal-desc">
                <span className="text-gray-08">{branchName}</span>
              </div>
            ),
          };
        } else if (commits_count === 0) {
          // before after都不是0 -> "#{user_name} pushed to #{ref_type} #{ref} of #{project_link} (#{compare_link})"
          return {
            title: (
              <div>
                <span className="text-author-color">{displayName}</span>{' '}
                {isProjectPage ? (
                  intl.get({ id: 'code-assets.components.activityList.To', defaultMessage: '向' })
                ) : (
                  <span>
                    {intl.get({
                      id: 'code-assets.components.activityList.ToTheCodeLibrary',
                      defaultMessage: '向代码库',
                    })}{' '}
                    <Link to={repository_homepage} className="text-gray-08">
                      {repository_public_name}
                    </Link>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.The',
                      defaultMessage: '的',
                    })}
                  </span>
                )}{' '}
                <Link
                  to={`${repository_homepage}/tree/${utils.revisionEncodeURI(branchName)}`}
                  className="text-gray-08"
                >
                  {branchName}
                </Link>{' '}
                {object_kind === 'push'
                  ? intl.get({
                      id: 'code-assets.components.activityList.Branch',
                      defaultMessage: '分支',
                    })
                  : intl.get({
                      id: 'code-assets.components.activityList.Label',
                      defaultMessage: '标签',
                    })}
                {intl.get({
                  id: 'code-assets.components.activityList.ForcePushCode',
                  defaultMessage: '强制推送代码',
                })}
              </div>
            ),

            description: (
              <div>
                <div>
                  <a onClick={(e) => this.onCommitChange(e, after)} className="text-gray-08">
                    {after.slice(0, 8)}
                  </a>
                </div>
              </div>
            ),
          };
        } else {
          return {
            title: (
              <div>
                <span className="text-author-color">{displayName}</span>{' '}
                {isProjectPage ? (
                  intl.get({ id: 'code-assets.components.activityList.To', defaultMessage: '向' })
                ) : (
                  <span>
                    {intl.get({
                      id: 'code-assets.components.activityList.ToTheCodeLibrary',
                      defaultMessage: '向代码库',
                    })}{' '}
                    <Link to={repository_homepage} className="text-gray-08">
                      {repository_public_name}
                    </Link>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.The',
                      defaultMessage: '的',
                    })}
                  </span>
                )}{' '}
                <Link
                  to={`${repository_homepage}/tree/${utils.revisionEncodeURI(branchName)}`}
                  className="text-gray-08"
                >
                  {branchName}
                </Link>{' '}
                {object_kind === 'push'
                  ? intl.get({
                      id: 'code-assets.components.activityList.Branch',
                      defaultMessage: '分支',
                    })
                  : intl.get({
                      id: 'code-assets.components.activityList.Label',
                      defaultMessage: '标签',
                    })}
                {intl.get({
                  id: 'code-assets.components.activityList.PushCode',
                  defaultMessage: '推送代码',
                })}
              </div>
            ),

            description: (
              <CommitsDescription
                commits={commits}
                repository_homepage={repository_homepage}
                before={before}
                after={after}
                projectId={projectId}
                repoUrl={repoUrl}
                branchName={branchName}
              />
            ),
          };
        }
      },
      JOINED: () => {
        if (dataMap) {
          if (previous_access === 'NO_ACCESS' && current_access !== 'NO_ACCESS') {
            return {
              title: (
                <React.Fragment>
                  {isGroupPage ? (
                    <div>
                      <span className="text-author-color">{operator}</span>{' '}
                      {intl.get({
                        id: 'code-assets.components.activityList.Invitation',
                        defaultMessage: '邀请',
                      })}{' '}
                      {displayName}{' '}
                      {intl.get({
                        id: 'code-assets.components.activityList.BecomeCode',
                        defaultMessage: '成为代码',
                      })}
                      {isGroupActivity
                        ? intl.get({
                            id: 'code-assets.components.activityList.Group',
                            defaultMessage: '组',
                          })
                        : intl.get({
                            id: 'code-assets.components.activityList.Library',
                            defaultMessage: '库',
                          })}{' '}
                      <span className="text-repo-color">
                        {isGroupActivity ? group_path : repository_path}
                      </span>{' '}
                      {ENUM.role[current_access]}
                    </div>
                  ) : (
                    <div>
                      <span className="text-author-color">{operator}</span>{' '}
                      {intl.get({
                        id: 'code-assets.components.activityList.Invitation',
                        defaultMessage: '邀请',
                      })}{' '}
                      {displayName}{' '}
                      {intl.get({
                        id: 'code-assets.components.activityList.Become',
                        defaultMessage: '成为',
                      })}{' '}
                      {ENUM.role[current_access]}
                    </div>
                  )}
                </React.Fragment>
              ),

              description: (
                <div className="member-change">
                  <div className="member-change-avatar">
                    <TextAvatar text={displayName} image={user_avatar} sliceLength="2" />
                  </div>
                  <div className="member-change-info">
                    <span className="text-gray-08">{displayName}</span>
                    <span className="member-email text-gray-08">{user_email}</span>
                  </div>
                </div>
              ),
            };
          } else if (current_access !== 'NO_ACCESS' && previous_access !== 'NO_ACCESS') {
            return {
              title: (
                <React.Fragment>
                  {isGroupPage ? (
                    <div>
                      <span className="text-author-color">{operator}</span>{' '}
                      {intl.get({
                        id: 'code-assets.components.activityList.Modify',
                        defaultMessage: '修改',
                      })}{' '}
                      {displayName}{' '}
                      {intl.get({
                        id: 'code-assets.components.activityList.BecomeCode',
                        defaultMessage: '成为代码',
                      })}
                      {isGroupActivity
                        ? intl.get({
                            id: 'code-assets.components.activityList.Group',
                            defaultMessage: '组',
                          })
                        : intl.get({
                            id: 'code-assets.components.activityList.Library',
                            defaultMessage: '库',
                          })}{' '}
                      <span className="text-repo-color">
                        {isGroupActivity ? group_path : repository_path}
                      </span>{' '}
                      {ENUM.role[current_access]}
                    </div>
                  ) : (
                    <div>
                      <span className="text-author-color">{operator}</span>{' '}
                      {intl.get({
                        id: 'code-assets.components.activityList.Modify',
                        defaultMessage: '修改',
                      })}{' '}
                      {displayName}{' '}
                      {intl.get({
                        id: 'code-assets.components.activityList.Become',
                        defaultMessage: '成为',
                      })}{' '}
                      {ENUM.role[current_access]}
                    </div>
                  )}
                </React.Fragment>
              ),

              description: (
                <div className="member-change">
                  <div className="member-change-avatar">
                    <TextAvatar
                      text={displayName}
                      image={user_avatar}
                      sliceLength="2"
                      size="medium"
                    />
                  </div>
                  <div className="member-change-info">
                    <span className="text-gray-08">{displayName}</span>
                    <span className="member-email text-gray-08">{user_email}</span>
                  </div>
                </div>
              ),
            };
          }
        } else {
          return {
            title: (
              <React.Fragment>
                <div>
                  <span className="text-author-color">{displayName}</span>{' '}
                  {intl.get({
                    id: 'code-assets.components.activityList.AddCode',
                    defaultMessage: '加入代码',
                  })}
                  {isGroupActivity
                    ? intl.get({
                        id: 'code-assets.components.activityList.Group',
                        defaultMessage: '组',
                      })
                    : intl.get({
                        id: 'code-assets.components.activityList.Library',
                        defaultMessage: '库',
                      })}{' '}
                  <Link
                    to={isGroupActivity ? group_homepage : repository_homepage}
                    className="text-gray-08"
                  >
                    {isGroupActivity ? (
                      group_path
                    ) : (
                      <React.Fragment>{repository_public_name}</React.Fragment>
                    )}
                  </Link>
                </div>
              </React.Fragment>
            ),
          };
        }
        // 模板：#{user_name} joined project #{project_link}"
      },
      LEFT: () => {
        // 模板：#{user_name} left project #{project_link}"
        if (dataMap) {
          return {
            title: (
              <React.Fragment>
                {isGroupPage ? (
                  <div>
                    <span className="text-author-color">{operator}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.InTheCode',
                      defaultMessage: '在代码',
                    })}
                    {isGroupActivity
                      ? intl.get({
                          id: 'code-assets.components.activityList.Group',
                          defaultMessage: '组',
                        })
                      : intl.get({
                          id: 'code-assets.components.activityList.Library',
                          defaultMessage: '库',
                        })}{' '}
                    <span className="text-repo-color">
                      {isGroupActivity ? group_path : repository_path}
                    </span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.RemovedMembers',
                      defaultMessage: '移除了成员',
                    })}
                  </div>
                ) : (
                  <div>
                    <span className="text-author-color">{operator}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.RemovedMembers',
                      defaultMessage: '移除了成员',
                    })}
                  </div>
                )}
              </React.Fragment>
            ),

            description: (
              <div className="member-change">
                <div className="member-change-avatar">
                  <TextAvatar
                    text={displayName}
                    image={user_avatar}
                    sliceLength="2"
                    size="medium"
                  />
                </div>
                <div className="member-change-info">
                  <span>{displayName}</span>
                  <span className="member-email text-gray-08">{user_email}</span>
                </div>
              </div>
            ),
          };
        } else {
          return {
            title: (
              <React.Fragment>
                {isGroupPage ? (
                  <div>
                    <span className="text-author-color">{displayName}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.LeaveTheCode',
                      defaultMessage: '离开了代码',
                    })}
                    {isGroupActivity
                      ? intl.get({
                          id: 'code-assets.components.activityList.Group',
                          defaultMessage: '组',
                        })
                      : intl.get({
                          id: 'code-assets.components.activityList.Library',
                          defaultMessage: '库',
                        })}{' '}
                    <span className="text-repo-color">
                      {isGroupActivity ? group_path : repository_path}
                    </span>
                  </div>
                ) : (
                  <div>
                    <span className="text-author-color">{displayName}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.OutOfTheCodeLibrary',
                      defaultMessage: '离开了代码库',
                    })}{' '}
                  </div>
                )}
              </React.Fragment>
            ),

            description: (
              <div className="normal-desc">
                {isGroupActivity ? (
                  <Link to={group_homepage} className="text-gray-08">
                    {group_path}
                  </Link>
                ) : (
                  <Link to={repository_homepage} className="text-gray-08">
                    {repository_public_name}
                  </Link>
                )}
              </div>
            ),
          };
        }
      },
      CREATED: () => {
        if (activity.targetType === 'MergeRequest') {
          // 评审创建
          // 模板：#{user_name} created a mr at #{project_link}"
          return {
            title: (
              <React.Fragment>
                {isGroupPage ? (
                  <div>
                    <span className="text-author-color">{displayName}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.InTheCodeLibrary',
                      defaultMessage: '在代码库',
                    })}{' '}
                    <span className="text-repo-color">{repository_path}</span>
                    {intl.get({
                      id: 'code-assets.components.activityList.AMergeRequestIsCreated',
                      defaultMessage: '创建了合并请求',
                    })}{' '}
                  </div>
                ) : (
                  <div>
                    <span className="text-author-color">{displayName}</span>{' '}
                    {intl.get({
                      id: 'code-assets.components.activityList.AMergeRequestIsCreated',
                      defaultMessage: '创建了合并请求',
                    })}{' '}
                  </div>
                )}
              </React.Fragment>
            ),

            description: (
              <div className="normal-desc">
                <Link
                  to={`${repository_homepage}/merge_request/${mergeRequest.id}`}
                  className="text-gray-08"
                >
                  {mergeRequest.title}
                </Link>
              </div>
            ),
          };
        } else {
          // 代码库创建
          // 模板：#{user_name} created repository #{project_link}"
          return {
            title: (
              <div>
                <span className="text-author-color">{displayName}</span>{' '}
                {intl.get({
                  id: 'code-assets.components.activityList.ACodeLibraryIsCreated',
                  defaultMessage: '创建了代码库',
                })}{' '}
              </div>
            ),

            description: (
              <div className="normal-desc">
                {isGroupPage ? (
                  <Link to={repository_homepage} className="text-gray-08">
                    {repository_path}
                  </Link>
                ) : (
                  <Link to={repository_homepage} className="text-gray-08">
                    {repository_public_name}
                  </Link>
                )}
              </div>
            ),
          };
        }
      },
      RESTORE: () => {
        // 代码库恢复
        // 模板：#{user_name} created repository #{project_link}"
        return {
          title: (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.RestoredTheCodeLibrary',
                defaultMessage: '恢复了代码库',
              })}{' '}
            </div>
          ),

          description: (
            <div className="normal-desc">
              {isGroupPage ? (
                <Link to={repository_homepage} className="text-gray-08">
                  {repository_path}
                </Link>
              ) : (
                <Link to={repository_homepage} className="text-gray-08">
                  {repository_public_name}
                </Link>
              )}
            </div>
          ),
        };
      },
      DESTROYED: () => {
        // 代码库删除
        // 模板：#{user_name} created repository #{project_link}"
        return {
          title: (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.DeletedTheCodeLibrary',
                defaultMessage: '删除了代码库',
              })}{' '}
            </div>
          ),

          description: (
            <div className="normal-desc">
              {isGroupPage ? (
                <div className="text-gray-08">{repository_path}</div>
              ) : (
                <div className="text-gray-08">{repository_public_name}</div>
              )}
            </div>
          ),
        };
      },
      APPROVE: () => ({
        // 评审合并
        // 模板：#{user_name} accepted #{mr} at #{project_link}"
        title: (
          <div>
            <span className="text-author-color">{displayName}</span>{' '}
            {intl.get({
              id: 'code-assets.components.activityList.TheMergeRequestIsPassed',
              defaultMessage: '通过了合并请求',
            })}{' '}
          </div>
        ),

        description: (
          <div className="normal-desc">
            <Link
              to={`${repository_homepage}/merge_request/${mergeRequest.id}`}
              className="text-gray-08"
            >
              {mergeRequest.title}
            </Link>
          </div>
        ),
      }),

      CLOSED: () => ({
        // 评审关闭
        // 模板：#{user_name} 将代码库 #{repo1} 的代码评审 #{cr1} 的状态置为关闭
        title: (
          <div>
            <span className="text-author-color">{displayName}</span>{' '}
            {intl.get({
              id: 'code-assets.components.activityList.TheMergeRequestIsDisabled',
              defaultMessage: '关闭了合并请求',
            })}{' '}
          </div>
        ),

        description: (
          <div className="normal-desc">
            <Link
              to={`${repository_homepage}/merge_request/${mergeRequest.id}`}
              className="text-gray-08"
            >
              {mergeRequest.title}
            </Link>
          </div>
        ),
      }),

      REOPEN: () => ({
        // 评审重新打开
        // 模板：#{user_name} 将代码库 #{repo1} 的代码评审 #{cr1} 重新打开
        title: (
          <div>
            <span className="text-author-color">{displayName}</span>{' '}
            {intl.get({
              id: 'code-assets.components.activityList.ReopenedTheMergeRequest',
              defaultMessage: '重开了合并请求',
            })}
          </div>
        ),

        description: (
          <div>
            <Link
              to={`${repository_homepage}/merge_request/${mergeRequest.id}`}
              className="text-gray-08"
            >
              {mergeRequest.title}
            </Link>
          </div>
        ),
      }),

      COMMENTED: () => {
        if (note) {
          return {
            // 评论
            // 模板：#{user_name} commented on #{mr or commit} at #{project_link}"
            title: (
              <div>
                <span className="text-author-color">{displayName}</span>{' '}
                {intl.get({
                  id: 'code-assets.components.activityList.InTheCodeLibrary',
                  defaultMessage: '在代码库',
                })}{' '}
                <Link to={repository_homepage}>{repository_public_name}</Link>{' '}
                {intl.get({ id: 'code-assets.components.activityList.The', defaultMessage: '的' })}
                {note.noteable_type === 'MergeRequest' ? (
                  <span>
                    {intl.get({
                      id: 'code-assets.components.activityList.CodeReview',
                      defaultMessage: '代码评审',
                    })}{' '}
                    <Link
                      to={`${repository_homepage}/merge_request/${mergeRequest.id}`}
                      className="text-gray-08"
                    >
                      #{mergeRequest.id}
                    </Link>
                  </span>
                ) : null}
                {note.noteable_type === 'Issue' ? <span> issue</span> : null}
                {note.noteable_type === 'Commit' ? <span> commit</span> : null}{' '}
                {intl.get({
                  id: 'code-assets.components.activityList.AddedComments',
                  defaultMessage: '中添加了评论',
                })}
              </div>
            ),

            description: (
              <div dangerouslySetInnerHTML={{ __html: note.note }} className="text-gray-08" />
            ),
          };
        } else {
          return {
            title: null,
            description: null,
          };
        }
      },
      CREATE_PROJECT: () => {
        return {
          title: (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.ACodeLibraryIsCreated',
                defaultMessage: '创建了代码库',
              })}{' '}
            </div>
          ),

          description: (
            <div className="normal-desc">
              {isGroupPage ? (
                <Link to={repository_homepage} className="text-gray-08">
                  {repository_path}
                </Link>
              ) : (
                <Link to={repository_homepage} className="text-gray-08">
                  {repository_public_name}
                </Link>
              )}
            </div>
          ),
        };
      },
      IMPORT_PROJECT: () => {
        return {
          title: (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.ImportedCodeLibrary',
                defaultMessage: '导入了代码库',
              })}{' '}
            </div>
          ),

          description: (
            <div className="normal-desc">
              <span className="text-gray-08">
                {(dataMap && dataMap[':name']) || repository_public_name}
              </span>
            </div>
          ),
        };
      },
      // 合并事件
      MERGE_TYPE: () => ({
        title: (
          <div>
            <span className="text-author-color">{displayName}</span>{' '}
            {intl.get({ id: 'code-assets.components.activityList.Pass', defaultMessage: '通过' })}
            {mergeTypeText[dataMap && dataMap[':merge_type'] ? dataMap[':merge_type'] : 'default']}
            {intl.get({
              id: 'code-assets.components.activityList.MergeCodeReview',
              defaultMessage: '合并代码评审',
            })}{' '}
          </div>
        ),

        description: (
          <div className="normal-desc">
            <Link
              to={`${repository_homepage}/merge_request/${mergeRequest.id}`}
              className="text-gray-08"
            >
              {mergeRequest.title}
            </Link>
          </div>
        ),
      }),

      REPO_UPDATED: () => {
        const updateRepoType = dataMap && dataMap[':type'];
        let repoUpdatedTitle = '';
        let repoUpdatedDescription = '';

        // 代码库更新
        if (updateRepoType === 'UPDATE_REPO_NAME') {
          const updateRepoName = dataMap && dataMap[':repo_name'];
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedTheBasicInformationOf',
                defaultMessage: '更新了代码库基本信息',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.ChangeTheName',
                  defaultMessage: '修改名称为',
                })}{' '}
                {updateRepoName}
              </span>
            </div>
          );
        } else if (updateRepoType === 'SWITCH_ON_CLONE_DOWNLOAD') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.CloneDownloadControlEnabled',
                defaultMessage: '开启了克隆下载控制',
              })}
            </div>
          );
        } else if (updateRepoType === 'SWITCH_OFF_CLONE_DOWNLOAD') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.CloneDownloadControlDisabled',
                defaultMessage: '关闭了克隆下载控制',
              })}
            </div>
          );
        } else if (updateRepoType === 'UPDATE_DEFAULT_BRANCH') {
          const updateDefaultBranch = dataMap && dataMap[':default_branch'];
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedBranchSettings',
                defaultMessage: '更新了分支设置',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.ModifyTheDefaultBranch',
                  defaultMessage: '修改默认分支为',
                })}{' '}
                {updateDefaultBranch}
              </span>
            </div>
          );
        } else if (updateRepoType === 'ADD_PROTECTED_BRANCH') {
          const updateProtectedBranch = dataMap && dataMap[':protected_branch'];
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedBranchSettings',
                defaultMessage: '更新了分支设置',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.AddBranchProtectionRules',
                  defaultMessage: '新增保护分支规则',
                })}{' '}
                {updateProtectedBranch}
              </span>
            </div>
          );
        } else if (updateRepoType === 'EDIT_PROTECTED_BRANCH') {
          const updateProtectedBranch = dataMap && dataMap[':protected_branch'];
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedBranchSettings',
                defaultMessage: '更新了分支设置',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.EditProtectionBranchRules',
                  defaultMessage: '编辑保护分支规则',
                })}{' '}
                {updateProtectedBranch}
              </span>
            </div>
          );
        } else if (updateRepoType === 'DELETE_PROTECTED_BRANCH') {
          const updateProtectedBranch = dataMap && dataMap[':protected_branch'];
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedBranchSettings',
                defaultMessage: '更新了分支设置',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.DeleteAProtectionBranchRule',
                  defaultMessage: '删除保护分支规则',
                })}{' '}
                {updateProtectedBranch}
              </span>
            </div>
          );
        } else if (updateRepoType === 'ADD_PUSH_RULE') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedPushRuleSettings',
                defaultMessage: '更新了推送规则设置',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.AddPushRules',
                  defaultMessage: '新增推送规则',
                })}
              </span>
            </div>
          );
        } else if (updateRepoType === 'EDIT_PUSH_RULE') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedPushRuleSettings',
                defaultMessage: '更新了推送规则设置',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.EditPushRules',
                  defaultMessage: '编辑推送规则',
                })}
              </span>
            </div>
          );
        } else if (updateRepoType === 'DELETE_PUSH_RULE') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedPushRuleSettings',
                defaultMessage: '更新了推送规则设置',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.DeleteAPushRule',
                  defaultMessage: '删除推送规则',
                })}
              </span>
            </div>
          );
        } else if (updateRepoType === 'EDIT_MERGE_TYPES') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedMergeRequestSettings',
                defaultMessage: '更新了合并请求设置',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.EditMergeTypeControl',
                  defaultMessage: '编辑合并类型控制',
                })}
              </span>
            </div>
          );
        } else if (updateRepoType === 'ADD_WEBHOOK') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedWebhooks',
                defaultMessage: '更新了Webhooks',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.AddWebhook',
                  defaultMessage: '新增 Webhook',
                })}
              </span>
            </div>
          );
        } else if (updateRepoType === 'EDIT_WEBHOOK') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedWebhooks',
                defaultMessage: '更新了Webhooks',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.EditingWebhook',
                  defaultMessage: '编辑 Webhook',
                })}
              </span>
            </div>
          );
        } else if (updateRepoType === 'DELETE_WEBHOOK') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedWebhooks',
                defaultMessage: '更新了Webhooks',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.DeleteWebhook',
                  defaultMessage: '删除 Webhook',
                })}
              </span>
            </div>
          );
        } else if (updateRepoType === 'SWITCH_ON_DEPLOY_KEYS') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedTheDeploymentKey',
                defaultMessage: '更新了部署密钥',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.EnableKey',
                  defaultMessage: '启用密钥',
                })}
              </span>
            </div>
          );
        } else if (updateRepoType === 'SWITCH_OFF_DEPLOY_KEYS') {
          repoUpdatedTitle = (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.UpdatedTheDeploymentKey',
                defaultMessage: '更新了部署密钥',
              })}
            </div>
          );

          repoUpdatedDescription = (
            <div>
              <span>
                {intl.get({
                  id: 'code-assets.components.activityList.RemoveKey',
                  defaultMessage: '移除密钥',
                })}
              </span>
            </div>
          );
        }

        return {
          title: repoUpdatedTitle,
          description: repoUpdatedDescription,
        };
      },
      OPEN_PROJECT_CRYPTO: () => {
        return {
          title: (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.VaultEncryptionEnabled',
                defaultMessage: '开启了仓库加密',
              })}{' '}
            </div>
          ),
        };
      },
      CLOSE_PROJECT_CRYPTO: () => {
        return {
          title: (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.TheRepositoryEncryptionIsDisabled',
                defaultMessage: '关闭了仓库加密',
              })}{' '}
            </div>
          ),
        };
      },
      MIRROR_SYNC: () => {
        return {
          title: (
            <div>
              <span className="text-author-color">{displayName}</span>{' '}
              {intl.get({
                id: 'code-assets.components.activityList.VaultSynchronizationIsPerformed',
                defaultMessage: '执行了仓库同步',
              })}
            </div>
          ),

          description: (
            <div className="normal-desc">
              {intl.get({
                id: 'code-assets.components.activityList.Source',
                defaultMessage: '同步来源',
              })}{' '}
              <a href={mirrorSyncUrl} target="_blank" rel="noreferrer">
                {mirrorSyncUrl}
              </a>
            </div>
          ),
        };
      },
    };

    const a = ENUM.activity_action[activity.action] || 'CREATED';

    /* eslint-enable complexity */
    return actionJsxGeneratorHash[a]();
  }

  render() {
    const { actData } = this.props;
    // console.log('actData', actData);
    const { dataMap } = actData;
    const user_name = actData.user.name || actData.user.username;
    const operator = dataMap && dataMap[':operator'] && dataMap[':operator'][':name'];
    const user_avatar = actData.user.avatar_url;
    // 兼容处理avatar_url可能是个对象也可能是个字串
    const operator_avatar =
      (dataMap && dataMap[':operator'] && dataMap[':operator'][':avatar_url'].avatar_url) ||
      (dataMap && dataMap[':operator'] && dataMap[':operator'][':avatar_url']);
    // const before = dataMap && dataMap[':before'];
    // const after = dataMap && dataMap[':after'];
    // const isOneLineFlag = !(
    //   ENUM.activity_action[actData.action] === 'PUSHED' &&
    //     before !== Array(41).join('0') &&
    //     after !== Array(41).join('0')
    // );
    const { title, description } = this.activityActionJsx(actData);
    return (
      <React.Fragment>
        <YunxiaoList.Item
          title={
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <TextAvatar
                text={operator || user_name}
                sliceLength="2"
                size="xs"
                image={operator_avatar || user_avatar}
              />

              <div style={{ marginLeft: '8px' }}>{title}</div>
            </div>
          }
          description={<div style={{ marginLeft: '32px' }}>{description}</div>}
          extra={
            <YunxiaoList.Item.Actions>
              {utils.getBeautyTime(actData.updatedAt)}
            </YunxiaoList.Item.Actions>
          }
        />
      </React.Fragment>
    );
  }
}
